<template>
  <div class="batch">
    <!--<div class="head">-->
    <!--<x-header :left-options="{showBack: false}">批量捐</x-header>-->
    <!--</div>-->
    <div class="title-list">
      <ul>
        <li @click="tabChange('quanbu')"><span :class="{'onactive': quanbu}">全部</span></li>
        <li @click="tabChange('zhukun')"><span :class="{'onactive': zhukun}">助困</span></li>
        <li @click="tabChange('zhuxue')"><span :class="{'onactive': zhuxue}">助学</span></li>
        <li @click="tabChange('zhuyi')"><span :class="{'onactive': zhuyi}">助医</span></li>
        <li @click="tabChange('qita')"><span :class="{'onactive': qita}">其他</span></li>
      </ul>
    </div>
    <div class="home-tab">
      <div>
        <flexbox v-for="(eventLists, index) in eventList">
          <flexbox-item :span="1">
            <div @click="Checked(index)" class="flex-demo" style="line-height: 64px;text-align: center;">
              <check-icon disabled :value.sync="eventList[index].ifChecked" type="plain"></check-icon>
            </div>
          </flexbox-item>
          <flexbox-item :span="4" >
            <div class="flex-demo" @click='goProjectDetails(eventLists.id)'>
              <img :src="imageUrl.imageUrl + eventLists.eventPicUrl"/>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="flex-demo" @click='goProjectDetails(eventLists.id)'>
              <p v-html="eventLists.eventName"></p>
              <x-progress :percent="eventLists.schedule" :show-cancel="false"></x-progress>
              <span class="precess-right">{{eventLists.schedule}}%</span>
              <div class="project-foot">
                  <span class="project-foot-left">目标<span
                    class="content-red">{{eventLists.eventGoalAmount}}</span>元</span>
                <span class="project-foot-left">参加<span
                  class="content-red">{{eventLists.attendPeople}}</span>人次</span>
              </div>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <!--<scroller lock-x height="444px" :use-pullup='use_pullup' :pullup-config="pullup_con"-->
              <!--ref="scroller" :scroll-bottom-offst="200">-->

    <!--</scroller>-->

    <div class="dialog-countmoney">
      <div class="dialog-coun">
        <p>
          <check-icon :value.sync="allChecked" type="plain"></check-icon>
          全选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 单个项目捐助：<input v-model="oneDonation" placeholder="100"/>元
        </p>
        <p class="money-count">
          <span class="countmoney-left">已选项目：<label v-model="selectedItems">{{selectedItems}}</label>个</span>
          <span class="countmoney-right">捐助金额：<label v-model="allDonation">{{allDonation}}</label>元</span>
        </p>
        <p class="money-donation">
          <!--<i class="iconfont batch-list-left">&#xe647;</i>-->
          <!--<check-icon :value.sync="allChecked" type="plain"></check-icon>-->
          <!--全选-->
          <span @click="isagree">
            <i v-show="agree == true" class="iconfont batch-list-left">&#xe620;</i>
            <i v-show="agree == false" class="iconfont batch-list-left">&#xe647;</i>
          </span>
          已阅读并同意
          <router-link :to="{path: '/aboutqqc', query: {witchOne: 'tiaokuan'}}"><a>亲青筹捐款协议</a></router-link>
          <button @click="wantDonate">我要捐助</button>
        </p>
      </div>
      <!--<p class="agreement">-->
      <!--<span @click="isagree">-->
      <!--<i v-show="agree == true" class="iconfont batch-list-left">&#xe620;</i>-->
      <!--<i v-show="agree == false" class="iconfont batch-list-left">&#xe647;</i>-->
      <!--</span>-->
      <!--已阅读并同意-->
      <!--<a>亲青筹捐款协议</a>-->
      <!--</p>-->
    </div>
    <nav-bottom></nav-bottom>
  </div>
</template>

<script src="./batch.js"></script>
